// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'
// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
    // { 
    //     path: '/', 
    //     component: Home 
    // },
    { 
        path: '/', 
        // redirect重定向
        redirect: "/home" 
    },
    {
        path: '/home',
        component: Home,
        meta: {     // 元数据（描述数据的数据）
            title: '首页'
         } 
    },
    {
        path: '/about',
        component: About,
        meta: { 
            title: '关于'
         },
        beforeEnter: (to, from, next) => {
            console.log('about beforeEnter');
            next();
        }
    }
]
const router = new VueRouter({
    // 配置路由和组件之间的映射关系
    routes,
    mode: 'history',
    linkActiveClass: 'active'
}) 

// 全局导航守卫
// 前置守卫（guard)
router.beforeEach((to, from, next) => {
    // 从from跳转到to
    // document.title = to.meta.title    //  好像两个都可以
    document.title = to.matched[0].meta.title
    // console.log(to);
    console.log('++++')
    next()
})

// 后置钩子（hook)
router.afterEach((to, from) => {
    console.log('----')
})

// 3.将router对象传入到Vue实例
export default router
// src/main.js中导入

